﻿<template>
  <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width='40%' @close = 'closeDialog'
  append-to-body :close-on-click-modal = "false" :close-on-press-escape = "false">
    <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth'>
      <!-- 表格事件表达式 -->
      <el-form-item label = "排序条件表达式：" v-if = "fixedFilterRow && (fixedFilterRow.eventsType === 'initTable' || fixedFilterRow.eventsType === 'exportReport')">
        <el-input v-model = 'ruleForm.orderbyExpress' placeholder = "排序条件表达式" type = 'textarea' autosize></el-input>
      </el-form-item>
      <el-form-item label = "多过滤条件表达式：" v-if = "fixedFilterRow && (fixedFilterRow.eventsType === 'initTable' || fixedFilterRow.eventsType === 'exportReport')">
        <el-input v-model = 'ruleForm.conditionExpress' placeholder = "多过滤条件表达式" type = 'textarea' autosize></el-input>
      </el-form-item>
      <el-form-item label = "固定过滤条件表达式：" v-if = "fixedFilterRow && Object.keys(fixedFilterRow).indexOf('relatedTag') !== -1 && fixedFilterRow.eventsType.indexOf('openPage') === -1 && fixedFilterRow.eventsType.indexOf('_edit') === -1 && fixedFilterRow.eventsType.indexOf('_add') === -1">
        <el-input v-model = 'ruleForm.filterExpress' placeholder = "固定过滤条件表达式" type = 'textarea' autosize></el-input>
      </el-form-item>
      <!-- 流程类事件表达式 -->
      <el-form-item label = "自定义参数表达式：" v-if = "fixedFilterRow && (fixedFilterRow.eventsType.indexOf('extend_') !== -1 || fixedFilterRow.eventsType === 'removeTable' || fixedFilterRow.eventsType === 'recoverTable' || fixedFilterRow.eventsType.indexOf('activeTable') !== -1 || fixedFilterRow.eventsType.indexOf('_edit') !== -1 || fixedFilterRow.eventsType.indexOf('_add') !== -1)">
        <el-input v-model = 'ruleForm.dataExpress' placeholder = "自定义参数表达式" type = 'textarea' autosize></el-input>
      </el-form-item>
      <el-form-item label = "关联元数据表表达式：" v-if = "fixedFilterRow && Object.keys(fixedFilterRow).indexOf('relatedTag') !== -1 && fixedFilterRow.eventsType !== 'exportReport' && fixedFilterRow.eventsType !== 'removeTable' && fixedFilterRow.eventsType !== 'recoverTable' && fixedFilterRow.eventsType.indexOf('openPage') === -1 && fixedFilterRow.eventsType.indexOf('_edit') === -1 && fixedFilterRow.eventsType.indexOf('_add') === -1">
        <el-input v-model = 'ruleForm.refExpress' placeholder = "关联元数据表表达式" type = 'textarea' autosize></el-input>
      </el-form-item>
      <!-- 表格行事件表达式 -->
      <el-form-item label = "表格行事件隐藏表达式：" v-if = "fixedFilterRow && fixedFilterRow.eventsType.indexOf('Table') !== -1 && fixedFilterRow.eventsType !== 'initTable'">
        <el-input v-model = 'ruleForm.rowExpress' placeholder = "表格行事件隐藏表达式" type = 'textarea' autosize></el-input>
      </el-form-item>
      <!-- 新页面的url地址 -->
      <el-form-item label = "系统外页面Url地址：" v-if = "fixedFilterRow && fixedFilterRow.eventsType.indexOf('openPage') !== -1">
        <el-input v-model = 'ruleForm.linkUrlExpress' placeholder = "系统外页面Url地址" type = 'textarea' autosize></el-input>
      </el-form-item>
      <el-form-item class = 'form_noLeftMargin'>
        <el-button type = "info" @click = "resetForm ('ruleForm')">取 消</el-button>
        <el-button type = "primary" @click = "submitForm ('ruleForm')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: ['fixedFilterRow', 'fixedFilterDialog'],
  data () {
    return {
      dialogTitle: '设置事件表达式',
      dialogFormVisible: false,
      labelWidth: '180px',
      ruleForm: {
        filterExpress: '',
        orderbyExpress: '',
        conditionExpress: '',
        dataExpress: '',
        refExpress: '',
        rowExpress: '',
        linkUrlExpress: ''
      }
    }
  },
  methods: {
    // 点击弹窗的确定按钮
    submitForm (forms) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          let obj = {
            filterExpress: this.ruleForm.filterExpress,
            orderbyExpress: this.ruleForm.orderbyExpress,
            conditionExpress: this.ruleForm.conditionExpress,
            dataExpress: this.ruleForm.dataExpress,
            refExpress: this.ruleForm.refExpress,
            rowExpress: this.ruleForm.rowExpress,
            linkUrlExpress: this.ruleForm.linkUrlExpress
          }
          this.$emit('settingFixedFilterSuccess', obj)
        } else {
          return false
        }
      })
    },
    // 点击弹窗的取消按钮
    resetForm (forms) {
      this.$refs[forms].clearValidate()
      this.$emit('settingFixedFilterFailed')
    },
    closeDialog () {
      this.$refs.ruleForm.clearValidate()
      this.$emit('settingFixedFilterFailed')
    }
  },
  watch: {
    fixedFilterDialog: {
      handler (val) {
        this.dialogFormVisible = val
        if (val) {
          this.ruleForm.filterExpress = this.fixedFilterRow.fixed_filter_express ? this.fixedFilterRow.fixed_filter_express : ''
          this.ruleForm.orderbyExpress = this.fixedFilterRow.fixed_orderby_express ? this.fixedFilterRow.fixed_orderby_express : ''
          this.ruleForm.conditionExpress = this.fixedFilterRow.other_condition_express ? this.fixedFilterRow.other_condition_express : ''
          this.ruleForm.dataExpress = this.fixedFilterRow.fixed_data_express ? this.fixedFilterRow.fixed_data_express : ''
          this.ruleForm.refExpress = this.fixedFilterRow.ref_express ? this.fixedFilterRow.ref_express : ''
          this.ruleForm.rowExpress = this.fixedFilterRow.row_express ? this.fixedFilterRow.row_express : ''
          this.ruleForm.linkUrlExpress = this.fixedFilterRow.linkUrlExpress ? this.fixedFilterRow.linkUrlExpress : ''
        }
      },
      deep: true
    }
  }
}
</script>
